<template>
  <div>
    <div>
      <el-form :inline="true" :model="param">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-input @clear="findUser" v-model="param.name" placeholder="筛选姓名" clearable prefix-icon="el-icon-search"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话">
            <el-input @clear="findUser" v-model="param.phone" placeholder="筛选电话" clearable prefix-icon="el-icon-search"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item></el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="findUser">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="success" @click="addUser">新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div style="margin-bottom: 10px ;">

      <el-table ref="userTable" :data="tableData" :stripe="true" :border="true"
                style="width: 100%">
        <el-table-column prop="account" label="账号" width="80"></el-table-column>
        <el-table-column prop="type" label="角色" width="90" align="center">
          <template v-slot="{row}">
            <el-tag effect="plain" v-if="row.type === 1" size="small">管理员</el-tag>
            <el-tag effect="plain" type="warning" v-if="row.type === 2" size="small">员 工</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="90"></el-table-column>
        <el-table-column prop="age" label="年龄" width="50"></el-table-column>
        <el-table-column prop="gender" label="性别" width="50">
          <template v-slot="{row}">
            <span v-if="row.gender === 1" >女</span>
            <span v-else >男</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="入职时间" width="100"></el-table-column>
        <el-table-column prop="branchName" label="入职店铺"></el-table-column>
        <el-table-column prop="salary" label="薪资" width="60"></el-table-column>
        <el-table-column prop="phone" label="电话"  width="105"></el-table-column>
        <el-table-column prop="mail" label="邮箱"></el-table-column>
        <el-table-column prop="address" label="住址"></el-table-column>
        <el-table-column prop="status" label="启用状态" width="85" align="center">
          <template v-slot="{row}">
            <el-tag type="danger" v-if="row.status === 2" size="small">禁用</el-tag>
            <el-tag v-else size="small">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="modifyTime" label="修改时间" width="100" align="center"></el-table-column>
        <el-table-column label="操作" width="120">
          <template v-slot="{row}">
            <el-button v-if="row.status === 1" @click="jinUser(row)" type="text" size="small">禁用</el-button>
            <el-button v-else @click="openUser(row)" type="text" size="small">启用</el-button>
            <el-button @click="upUser(row)" type="text" size="small">薪资</el-button>
            <el-button @click="doDelete(row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-sizes="[8, 16, 30]" @current-change="pageChange($event)"
                     :page-size=this.param.size @size-change="sizeChange($event)"
                     layout="total,prev,pager,next,sizes" :total="total" small>
      </el-pagination>
      <!--新增公告-->
      <el-dialog title="新增员工" :visible.sync="isAdding" width="30%" :close-on-click-modal="false" center>
        <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model="addForm.account"></el-input>
          </el-form-item>
          <el-form-item label="入职店铺" prop="branchId">
            <el-select v-model="addForm.branchId" placeholder="请选择分店" clearable style="width: 100%">
              <el-option v-for="item in branchList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input disabled v-model="addForm.password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addForm')">重置</el-button>
        <el-button type="primary" @click="add">确认</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name: "UserInformation",
  data() {
    return {
      userInfo: [],
      tableData: [],
      tableSelect: {},
      branchList:{},
      total: 0,
      isAdding: false,
      departmentList: [],
      param: {
        name: '',
        createTime:'',
        type:'',
        page: 1,
        size: 8,
      },
      addForm:{
        account:'',
        password:'123456'
      },
      user: {
        id: '',
        isDel: 0,
        modifyName: '',
        status: 1,
      },
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        branchId: [
          {required: true, message: '请输选择店铺', trigger: 'blur'},
        ],
      },
    };
  },
  mounted() {
    this.findUser();
    this.findBranch()
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
  },
  methods: {
    findUser() {
      this.$axios.get('/api/user/findUser', {params: this.param}).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      }).catch(e => console.log(e));
    },
    findBranch(){
      this.$axios.get('/api/house/findBranch', {params: this.param}).then(res => {
        this.branchList = res.data.data.list;
        console.log(this.branchList)
      }).catch(e => console.log(e))
    },
    addUser(){
      this.isAdding = true
    },
    add(){
      console.log(this.addForm)
      this.$axios.post('/api/user/saveUser', this.addForm).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '添加成功!',
            type: 'success'
          })
          this.isAdding = false;
          this.findUser()
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          })
        }
      })
    },
    resetForm(addForm) {
      this.$nextTick(()=>{
        this.$refs[addForm].resetFields();
      })
    },
    pageChange(page) {
      this.param.page = page;
      this.findUser()
    },
    sizeChange(size) {
      this.param.size = size;
      this.findUser()
    },
    upUser(row){
      console.log(row)
      this.$prompt('请输入员工薪资', '薪资修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\+?[1-9]\d*$/,
        inputValidator (value) {
          if (value === undefined) {
            return '分组名不能为空'
          } else if (value.length === 0) {
            return '分组名不能为空'
          } else if (value.length > 5) {
            return '请输入5个位以内的薪资金额'
          }
        },
        // inputErrorMessage: '不支持特殊字符'
      }).then(({ value }) => {
        let user= {
          id: row.id,
          salary: value
        }
        return this.$axios.post(`/api/user/upUser`,user).then(res => {  //逻辑删除
          if (res.data.status === 1) {  //删除成功
            this.$message({
              type: 'success',
              message: '修改薪资为:' + value
            });
            this.findUser();
          } else {
            this.$notify({
              title: '提示',
              message: res.data.message,
              type: 'error'
            });
          }
        }).catch(e => e);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    doDelete(row) {
      this.$confirm('将要删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        if (row.id !== userInfo.id) {
          this.user.id = row.id
          this.user.isDel = 1
          return this.$axios.post(`/api/user/upUser`, this.user).then(res => {  //逻辑删除
            if (res.data.status === 1) {  //删除成功
              this.$notify({
                title: '提示',
                message: '删除成功',
                type: 'success'
              });
              this.findUser();
            } else {
              this.$notify({
                title: '提示',
                message: res.data.message,
                type: 'error'
              });
            }
          }).catch(e => e);
        } else {
          this.$notify({
            title: '提示',
            message: '不能删除当前账号账户',
            type: 'error'
          });
        }
      })
    },
    jinUser(row) {
      this.user.id = row.id
      this.user.status = 2
      this.user.modifyTime = 'now()'
      if (this.user.id !== this.userInfo.id) {
        this.upApi()
      } else {
        this.$notify({
          title: 'w(ﾟДﾟ)w',
          message: "不能禁用当前账户 ( ఠൠఠ )ﾉ",
          type: 'warning'
        })
      }
    },
    openUser(row) {
      this.user.id = row.id
      this.user.status = 1
      this.user.modifyTime = 'now()'
      if (this.user.id !== this.userInfo.id) {
        console.log(this.user)
        this.upApi()
      } else {
        this.$notify({
          title: '(≧∇≦)ﾉ',
          message: '不能在开启啦 (≧∀≦)ゞ',
          type: 'warning'
        });
      }
    },
    upApi(){
      this.$axios.post('/api/user/upUser', this.user).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success'
          });
          this.findUser()
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          });
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
